﻿<template>
    <div class="hidden h100 flex-column">
        <component is="style" />
        <el-alert type="success" :closable="false">
            <template #title>
                <div v-on:click="openEdit(1,{data:{id:1,name:'根节点',level:0}})">点击此处添加菜单到根节点</div>
            </template>
            level：（暂定1:目录,2:菜单，3:权限，其实也没有什么限制）
        </el-alert>
        <el-tree ref="treeFunc" class="flex-column-fill" :data="menuList" :props="defaultProps" default-expand-all node-key="id" :expand-on-click-node="false">
            <template #default="d">
                <div class="flex-row-fill flex-row padding-right-10 padding-left-6">
                    <span class="el-tree-node__label">
                        <span :class="[d.data.level==1?'color-blue text-bold':d.data.level==2?'color-black':'color-green']">{{d.data.name}}</span>
                        <span class="color-red">【{{d.data.id}}】</span>
                        <span v-if="d.data.level==2" class="color-brownLight">（{{d.data.state}}）</span>
                        <el-button type="text" icon="el-icon-paperclip" title="批量设置权限" v-if="fn.edit" v-on:click="batch(d.data)"></el-button>
                    </span>
                    <div class="flex-row-fill"></div>
                    <div>
                        <el-button type="text" size="mini" v-on:click.stop="openEdit(2,d)" icon="el-icon-edit" title="编辑" v-if="fn.edit"></el-button>
                        <el-button type="text" size="mini" v-on:click.stop="openEdit(1,d)" icon="el-icon-plus" title="添加下一级" v-if="d.data.level<3&&fn.edit"></el-button>
                        <el-button type="text" size="mini" v-on:click.stop="openEdit(3,d)" icon="el-icon-delete" style="color:red;" title="删除" v-if="d.data.children.length<=0&&fn.del"></el-button>
                    </div>
                </div>
            </template>
        </el-tree>
        <el-drawer custom-class="el-drawer-fix" :visible="form.show" v-on:close="form.show=false" size="600px" :title="form.title" :destroy-on-close="true" :close-on-press-escape="false" :wrapper-closable="false">
            <div class="flex-column hidden" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                <div class="flex-column-fill hidden-x" style="padding-bottom:50px;">
                    <el-form ref="form" :model="form" label-width="90px" size="small" class="padding-10">
                        <el-form-item label="上级目录" v-if="form.hdPtitle">
                            <el-input v-model="form.hdPtitle+'('+form.hdPid+')'" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="ID" prop="hdId" required>
                            <el-input v-model="form.hdId" placeholder="请输入ID" clearable :readonly="!fn.edit||form.optType==2"></el-input>
                        </el-form-item>
                        <el-form-item label="level" prop="level" required>
                            <el-input v-model="form.level" placeholder="请输入level" clearable :readonly="!fn.edit"></el-input>
                        </el-form-item>
                        <el-form-item label="名称" prop="hdTitle" required>
                            <el-input v-model="form.hdTitle" placeholder="请输入名称" clearable :readonly="!fn.edit"></el-input>
                        </el-form-item>
                        <el-form-item label="state" prop="state">
                            <el-input v-model="form.state" placeholder="请输入state" clearable :readonly="!fn.edit"></el-input>
                        </el-form-item>
                        <el-form-item label="url" prop="url">
                            <el-input v-model="form.url" placeholder="请输入url" clearable :readonly="!fn.edit"></el-input>
                        </el-form-item>
                        <el-form-item label="color" prop="color">
                            <el-input v-model="form.color" placeholder="请输入color" clearable :readonly="!fn.edit"></el-input>
                        </el-form-item>
                        <el-form-item label="icon" prop="icon">
                            <el-input v-model="form.icon" placeholder="请输入icon" clearable :readonly="!fn.edit"></el-input>
                        </el-form-item>
                        <el-form-item label="显示设置" prop="showType">
                            <el-select v-model="form.showType" :disabled="!fn.edit" placeholder="请选择" filterable :popper-append-to-body="false">
                                <el-option label="默认全部显示" :value="0"></el-option>
                                <el-option label="小程序不显示" :value="1"></el-option>
                                <el-option label="PC不显示" :value="2"></el-option>
                                <el-option label="权限" :value="99"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="padding-10 border-top-solid border-greyLight">
                    <el-button-group size="small">
                        <el-button type="info" plain v-on:click="form.show=false" icon="fa fa-rotate-left" size="small">取 消</el-button>
                        <el-button type="primary" icon="fa fa-check" size="small" v-on:click="submit">保 存</el-button>
                    </el-button-group>
                </div>
            </div>
        </el-drawer>
        <el-drawer custom-class="el-drawer-fix" :visible="bth.show" v-on:close="bth.show=false" size="500px" title="批量设置权限" :destroy-on-close="true" :close-on-press-escape="false">
            <div class="flex-column hidden" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                <div class="flex-column-fill hidden-x" style="padding:10px;">
                    <el-checkbox-group v-model="bth.list">
                        <el-descriptions :colon="false" contentStyle="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                            <template #title>
                                <el-link>用户列表</el-link>
                            </template>
                            <template #extra>
                                <el-link type="primary" v-on:click="changeAll(0)">全选(含微信)</el-link>
                                <el-link type="primary" v-on:click="changeAll(1)">全选</el-link>
                                <el-link type="primary" class="margin-lr-10" v-on:click="changeAll(2)">反选</el-link>
                                <el-link type="primary" v-on:click="changeAll(3)">取消</el-link>
                            </template>
                            <template>
                                <el-descriptions-item v-for="(item,index) in bth.data" :key="index">
                                    <el-tooltip :content="item.openId" placement="top-start" :disabled="!!item.uiName">
                                        <el-checkbox :label="item.openId">{{item.uiName||item.openId}}</el-checkbox>
                                    </el-tooltip>
                                </el-descriptions-item>
                            </template>
                        </el-descriptions>
                    </el-checkbox-group>
                </div>
                <div class="padding-10 border-top-solid border-greyLight">
                    <el-button-group size="mini">
                        <el-button type="info" plain v-on:click="bth.show=false" size="mini">取 消</el-button>
                        <el-button type="primary" v-on:click="bthSubmit" size="mini">保 存</el-button>
                    </el-button-group>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'setting',
            props: {

            },
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    fn: {
                        edit: optor.canDo(9901), del: optor.canDo(9902)
                    },
                    menuList: [],
                    defaultProps: {
                        children: 'children',
                        label: 'name'
                    },
                    form: { show: false, hdTitle: '', showType: 0, optType: 1, hdPid: 0, hdId: 0, hdPtitle: '', state: '', url: '', color: '', icon: '', level: 3 },
                    bth: { id:0,show: false, isIndeterminate: true, checkAll: false, data:[],list:[]},
                }
            },
            computed: {

            },
            watch: {

            },
            activated: function () {
            },
            mounted: function () {
                var _this = this;
                _this.loadList();
            },
            methods: {
                loadList: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/GetFfun',
                        data: { openId: _this.optor.openId },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('查询失败：' + res.errmsg);
                            var menuList = [];
                            var createMenu = function (pId, list) {
                                var arr = $.grep(res.data.list.sort(function (a, b) {
                                    return a.Id - b.Id;
                                }), function (item, ix) {
                                    return item.flpId == pId;
                                });
                                $.each(arr, function (ix, item) {
                                    var m = {
                                        id: item.Id, pId: item.flpId, level: item.level, name: item.name, state: item.state, url: item.url, color: item.color, icon: item.icon, show: item.show, children: []
                                    };
                                    createMenu(m.id, m.children);
                                    list.push(m);
                                });
                            };
                            createMenu(1, menuList);
                            _this.menuList = menuList;
                        }
                    });
                },
                openEdit: function (show, d) { //show 1：新增；2：修改；3：删除；
                    var _this = this, data = d.data, node = d.node;
                    if (show == 1) {
                        _this.form.hdPid = data.id;
                        _this.form.hdPtitle = data.name;
                        _this.form.optType = 1;
                        _this.form.showType = 0;
                        _this.form.level = data.level == 0 ? 1 : data.level==1 ? 2 : 3;
                        _this.form.hdId = '';
                        _this.form.hdTitle = '';
                        _this.form.state = '';
                        _this.form.url = '';
                        _this.form.color = '';
                        _this.form.icon = '';
                        _this.form.show = true;
                        _this.form.title = '添加权限';
                        return;
                    };
                    if (show == 2) {
                        _this.form.hdPid = data.pId;
                        _this.form.hdPtitle = "";
                        _this.form.optType = 2;
                        _this.form.level = data.level;
                        _this.form.showType = data.show;
                        _this.form.hdId = data.id;
                        _this.form.hdTitle = data.name;
                        _this.form.state = data.state;
                        _this.form.url = data.url;
                        _this.form.color = data.color;
                        _this.form.icon = data.icon;
                        _this.form.show = true;
                        _this.form.title = '修改权限';
                        return;
                    };
                    if (show == 3) {
                        var title = data.children.length > 0 ? '删除【{0}】目录，将删除其子项的所有权限（目录），确定删除？'.formatStr(data.name) : ('确定删除【' + data.name + '】？');
                        hxt.confirm(title, function () {
                            hxt.post({
                                url: hxt.config.link + 'pc/menuSave',
                                data: {
                                    optType: 3, hdId: data.id
                                },
                                ok: function (res) {
                                    if (res.code != 0) return hxt.error('删除失败：' + res.errmsg);
                                    hxt.success('删除成功');
                                    const parent = node.parent;
                                    const children = parent.data.children || parent.data;
                                    const index = children.findIndex(function (d) { return d.id === data.id });
                                    children.splice(index, 1);
                                    _this.msg = null;
                                }
                            });

                        });
                        return;
                    };
                },
                batch: function (g) {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/optorList',
                        data: { elId: g.id },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('保存失败：' + res.errmsg);
                            _this.bth.show = true;
                            _this.bth.data = res.data;
                            _this.bth.id = g.id;
                            _this.bth.list = $.grep(res.data, function (item, ix) {
                                return item.possess == 1;
                            }).map(function (item) {
                                return item.openId;
                            });
                        }
                    });
                },
                changeAll: function (i) {
                    var _this = this;
                    if (i == 0) _this.bth.list = _this.bth.data.map(function (item) {
                        return item.openId;
                    });
                    if (i == 1) _this.bth.list = _this.bth.data.map(function (item) {
                        if (!!item.uiName && item.uiName.includes("微信")) return;
                        return item.openId;
                    });
                    else if (i == 2) _this.bth.list = _this.bth.data.map(function (item) {
                        if (_this.bth.list.indexOf(item.openId) == -1) return item.openId;
                    });
                    else if (i == 3) _this.bth.list = [];
                },
                submit: function (e) {
                    var _this = this;
                    hxt.validateElForm(_this, 'form', function () {
                        //if (_this.oldData.form == JSON.stringify(_this.form)) return hxt.msg('信息未更改');
                        hxt.confirm("确定保存此菜单（权限）", function () {
                            hxt.post({
                                url: hxt.config.link + 'pc/menuSave',
                                data: _this.form,
                                ok: function (res) {
                                    if (res.code != 0) return hxt.error('保存失败：' + res.errmsg);
                                    hxt.success('保存成功');
                                    _this.form.show = false;
                                    _this.loadList();
                                }
                            });
                        });
                    });
                },
                bthSubmit: function () {
                    var _this = this;
                    hxt.confirm("确定要为这些用户开通此权限吗?", function () {
                        hxt.post({
                            url: hxt.config.link + 'pc/userfunSave',
                            data: { id: _this.bth.id, idList: _this.bth.list.join(',') },
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('保存失败：' + res.errmsg);
                                hxt.success('保存成功');
                                _this.bth.show = false;
                            }
                        });
                    });
                },
            },
            components: {
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .el-tab-pane {
        height: 100%;
    }

    .el-tabs__content {
        flex: 1;
    }

    .el-tabs--border-card > .el-tabs__content {
        padding: 0px !important;
    }
</style>